דף הבית  >> 
 >> 

הרשם  |  התחבר


בניית באנרים ב-html5 באמצעות תכנת פלאש cc של Adobe 

מאת    [ 09/02/2016 ]

מילים במאמר: 702   [ נצפה 4469 פעמים ]

לקראת סוף שנת 2015 בשרו כותרות באתרים ובלוגים שונים על "סופה הקרב מתמיד של הפלאש". הסיבה העיקרית ננעצה בהפסקת התמיכה של מוצרי הגלישה של גוגל וחברות אחרות בטכנולוגיית פלאש להצגת תכנים דינמיים ואינטראקטיביים.

בפרט, התייחסה הטענה לקבצי swf שפלאש יוצרת ומציגים את התוכן בדפדפנים תומכים. סיבות טכניות ופרצות אבטחה שנתגלו בקבצים מסוג זה הפכו אותם באמת לנטל. השאלה הראשונה שכל מעצב שיצר באנרים עם פלאש שאל, היתה: איך אצור באנרים לפרסומות באינטרנט ומה יעלה בגורלם של באנרים ישנים, ששימשו כהדרים בדפי אינטרנט כאלה ואחרים.

שני פתרונות סבירים שנוצרו בידי Google היו אמורים לאפשר מעבר חלק ל"תקופה שאחרי מותה של הפלאש".
הראשון היה Swiffy, שהוא מנוע המרה של גוגל לקבצי פלאש היוצר מערך של קבצים המאפשרים הצגת תוכן של באנר בפורמט swf כתוכן שנתמך בתקן html5. כלומר, נוצר קובץ html המכיל בתוכו אלמנט canvas המאפשר הצגת אנימציות באמצעות קבצי javascript "המציירים" באופן דינמי בשטח האלמנט. לצורך השלמת הפעולה מוצמדות ספריות javascript חיצוניות. מנוע ההמרה הזה מאפשר המרה של קבצים עד משקל מסוים, ולעיתים מבצע המרה עם תקלות ושיבושים קטנים. לפעמים.
הפתרון השני שקיים הוא Google Web Designer. תוכנה חינמית המאפשרת לצור באופן ישיר יצירה של באנרים בפורמט html5 ופועלת עם ממשק גרפי שמזכיר את הממשק הגרפי של הפלאש, ולכן לכאורה המעבר מהפלאש אל התוכנה אמור להיות קל יחסית. אבל...

מעצבים שהשתמשו בכלי האנימציה של פלאש יחושו מיד במגבלות הכלים שהתוכנה החדשה מציעה. התוכנה היא בהחלט כלי סביר וטוב, במיוחד עבור מעצבים "שלא ידעו את פלאש" ונכונים להכיר כלי חדש "שכל עתידו לפניו".
למרבה השמחה וההגיון, בחברת Adobe לא מיהרו לוותר על פלאש, וכך בגרסאות CC ניתן לבחור, עם פתיחת התכנה, ביצירה של קובץ חדש מסוג HTML5 Canvas.
העבודה עם התוכנה נשארה בדיוק אותה העבודה עם אותם הכלים, למעט תכונות מסוימות שמושבתות, מאחר ולא ניתן בשלב זה להציג אותן באמצעות התקן.
לאחר יצירת האנימציה הנדרשת, מבצעים publish לקובץ ופלאש יוצרת קובץ html יחיד עם קובץ javascript המכיל את קוד האנימציה. כמו כן נוצרות תיקיות עבור המשאבים השונים הנדרשים עבור הסרטון (תמונות, צלילים וכיו"ב).

בזאת, כמעט סיימנו.
על מנת שהבאנרים יוצגו כראוי יש צורך לבצע מספר שינויים ותוספותבקוד ה-html בהתאם לאתרים שבהם יתפרסם הבאנר ובהתאם לדפדנים השונים.
באחד הקמפיינים האחרונים שיצרנו, נעזרנו בערן ומיכאל מחברת erate, על מנת לפתור מספר שיבושים שחלו בבאנרים (כמו סרגלי גלילה שהופיעו בהם), וכן נדרשת תשומת לב רבה להנחיות גוגל ולפורמט בו מכווצים הקבצים המרכיבים את הבאנר.

על מנת לחסוך זמן ועגמת נפש נציג את השינויים הנדרשים בקוד ה-html שמייצרת הפלאש:

זהו הקוד המקורי:

כאן יופיעו הקישורים לספריות הjavascript

לאחר התוספות:

כאן יופיעו הקישורים לספריות הjavascript

 

 

התוספות הן:
margin: 0; לתגית body,
ו-display: block; לתגית canvas
שתי התוספות האלה פותרת את הופעתם של סרגלי הגלילה סביב לבאנר.

לקבצים שנוצרים עבור קמפיינים בגוגל נדרשים השינויים הבאים:
גוגל לא יאפשר לקריאה של קבצים חיצוניים, לכן ארבעת קבצי ה-javascript הראשונים צריכים להשמר בתיקייה תחת תיקיית העל של הבאנר וכמובן יש צורך בשינוי לכתובת יחסית של אותם קבצים בקריאה.
תוספת נוספת היא תגית meta בראש הדף המכילה פרטים על מידת הבאנר ונכתבת כך:

 

בזה מסתיימות למעשה הפעולות לבניית באנר html5 באמצעות פלאש.

כחלק מתהליך המיתוג מחדש ו"החייאתה" של הפלאש מתכוונת Adobe להמשיך לשווק אותה תחת השם Adobe Animate החל מראשית שנת 2016.

סטודיו אלעד מרמור - עיצוב גרפי ובניית אתרים 050-8481322 || http://www.emarmor.co.il




מאמרים חדשים מומלצים: 

חשיבות היוגה לאיזון אורח חיים יושבני  -  מאת: מיכל פן מומחה
היתרונות של עיצוב בית בצורת L -  מאת: פיטר קלייזמר מומחה
לגלות, לטפח, להצליח: חשיבות מימוש פוטנציאל הכישרון לילדים עם צרכים מיוחדים -  מאת: עמית קניגשטיין מומחה
המדריך לניהול כלכלת משק בית עם טיפים ועצות לניהול תקציב -  מאת: נדב טל מומחה
חשבתם שרכב חשמלי פוטר מטיפולים.. תחשבו שוב -  מאת: יואב ציפרוט מומחה
מה הסיבה לבעיות האיכות בעולם -  מאת: חנן מלין מומחה
מערכת יחסים רעילה- איך תזהו מניפולציות רגשיות ותתמודדו איתם  -  מאת: חגית לביא מומחה
לימודים במלחמה | איך ללמוד ולהישאר מרוכז בזמן מלחמה -  מאת: דניאל פאר
אימא אני מפחד' הדרכה להורים כיצד תוכלו לנווט את קשיי 'מצב המלחמה'? -  מאת: רזיאל פריגן פריגן מומחה
הדרך שבה AI (בינה מלאכותית) ממלאת את העולם בזבל דיגיטלי -  מאת: Michael - Micha Shafir מומחה

מורנו'ס - שיווק באינטרנט

©2022 כל הזכויות שמורות

אודותינו
שאלות נפוצות
יצירת קשר
יתרונות לכותבי מאמרים
מדיניות פרטיות
עלינו בעיתונות
מאמרים חדשים

לכותבי מאמרים:
פתיחת חשבון חינם
כניסה למערכת
יתרונות לכותבי מאמרים
תנאי השירות
הנחיות עריכה
תנאי שימוש במאמרים



מאמרים בפייסבוק   מאמרים בטוויטר   מאמרים ביוטיוב